<!-- 柱状图 -->
<template>
	<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
	import * as echarts from "echarts";

	const animationDuration = 1000

	export default {
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '260px'
			},
			dataZoom: {
				type: Boolean,
				default: false
			},
			data: {
				type: Object,
				default () {
					return {
						xAxis: ['项目可行性研究', '项目洽谈环节', '项目准入环节', '项目上会环节','签约入园环节'],
						series: [{
							name: '项目一',
							data: [250, 150, 170, 150,170,],
						},{
							name: '项目二',
							data: [150, 250, 70, 160,70,],
						},{
							name: '项目三',
							data: [200, 110, 100, 250,270,],
						},{
							name: '项目四',
							data: [210, 200, 130, 50,100,],
						},{
							name: '项目五',
							data: [210, 200, 130, 50,100,],
						},]
					}
				}
			},
		},
		data() {
			return {
				chart: null
			}
		},
		mounted() {
			setTimeout(() => {
				this.initChart()
			}, 20)
		},
		beforeDestroy() {
			if (!this.chart) {
				return
			}
		},
		watch: {
			data(newData, oldData) {
				this.initChart();
			},
		},
		methods: {
			initChart() {

				this.chart = echarts.init(this.$el)
				let color = [['#1D93FF','#82C4FF'],['#36CF82','#92FFD9'],['#FFB637','#FFE19B'],['#FD5439','#FF9E87'],['#9891FF','#CBC4FF']]
				let series = []

				this.data.series.forEach((element,index) => {
					series.push({
						name: element.name,
						type: 'bar',
						barWidth: '20',
						barGap: '15%',
						data: element.data,
						animationDuration,
						itemStyle: {
							normal: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 1,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: color[index][0] // 0% 处的颜色
									}, {
										offset: 1,
										color: color[index][1] // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							}
						},
						label: {
							show: false,
						}
					})
				});

				this.chart.setOption({
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						},
						textStyle: {
							color: '#222',
						},
						backgroundColor: 'rgba(255,255,255,0.9)',
						borderColor: '#e2e7ec',
						borderWidth: 1
					},
					grid: {
						top: '40',
						bottom: '0',
						left: '0',
						right: '20',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: this.data.xAxis,
						axisTick: {
							show: false
						},
						axisLabel: {
							interval: 0,
							textStyle: {
								color: '#999999',
								fontSize: 12
							}
						},
						axisLine: {
							lineStyle: {
								color: '#EEF0F4'
							}
						},
					}],
					yAxis: [{
						type: 'value',
						name:'单位：次',
						nameTextStyle:{
							color: '#999',
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: '#999',
								fontSize: 12
							}
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: '#EEF0F4',
							}
						},
						axisTick: {
							show: false
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#EEF0F4',
								type: 'solid'
							}
						}
					}],
					series: series
				})
				// var index = 0 // 播放所在下标
				// setInterval(() => {
				//   this.chart.dispatchAction({
				//     type: 'showTip',
				//     seriesIndex: 0, // 第几条series
				//     dataIndex: index // 第几个tooltip
				//   })
				//   index++
				//   if (index > this.data.xAxis.length) {
				//     index = 0
				//   }
				// }, 2000)
			}
		}
	}
</script>

<style scoped>

</style>